<template>
  <div>
    <van-swipe-cell v-for="(item, index) in list" :key="index">
      <van-card
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        class="goods-card"
        :thumb="item.thumb"
      >
        <!-- 步进器 -->
        <template #bottom>
          <van-stepper v-model="item.count" id="right" />
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="remove(item.id)"
        />
      </template>
    </van-swipe-cell>
    <!-- 总价 -->
    <div class="price">
      <p>总价: {{ sum }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          price: 5,
          desc: "缴费日",
          title: "标题",
          thumb: "./1.jpg",
          count: 1,
        },
        {
          id: 2,
          price: 23,
          desc: "星黛露",
          title: "哈哈",
          thumb: "./2.jpg",
          count: 1,
        },
        {
          id: 3,
          price: 23,
          desc: "星黛露",
          title: "哈哈",
          thumb: "./3.jpg",
          count: 1,
        },
        {
          id: 4,
          price: 23,
          desc: "星黛露",
          title: "哈哈",
          thumb: "./4.jpg",
          count: 1,
        },
      ],
    };
  },

  // 总价计算属性
  computed: {
    sum() {
      var sum = 0;
      this.list.forEach((item) => {
        sum += item.count * item.price;
      });
      return sum+"￥";
    },
  },
  methods: {
    remove(id) {
      this.list.forEach((item, index) => {
        if (item.id == id) {
          this.list.splice(index, 1);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.delete-button {
  height: 100%;
}
.price {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(214, 214, 214);
  color: red;
  position: absolute;
  bottom: 10%;
}
#right {
  margin-left: 25%;
}
</style>